{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}机房管理{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       机房管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">机房管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      
        <form action={% url 'datacenter' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-3">
                  <label for="search">机房名称</label>
                  <input type="text" id='name' class="form-control" name='name'>
                </div>
                <div class="col-xs-2">
                  <label for="search">机房简称</label>
                  <input type="text" class="form-control" name='shortname'>
                </div>
                <div class="col-xs-2">
                  <label for="search">机房运营商</label>
                  <input type="text" class="form-control" name='isp'>
                </div>
                <div class="col-xs-2">
                  <label for="search">机房维护人</label>
                  <input type="text" class="form-control" name='admin'>
                </div>
                <div class="col-xs-2">
                  <label for="search">机房联系电话</label>
                  <input type="text" class="form-control" name='contactnumber'>
                </div>
                <div class="col-xs-4">
                  <label for="search">机房地址</label>
                  <input type="text" class="form-control" name='address'>
                </div>
              </div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn ">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">

      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <button type="submit" class="btn btn-default pull-right" onclick="window.open( {%url 'datacenterimport' %} )">机房导入</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>机房名称</th>
              <th>机房简称</th>
              <th>机房运营商</th>
              <th>机房维护人</th>
              <th>机房联系电话</th>
              <th>机房地址</th>
            </tr>
            </thead>
            <tbody>
                {% for idc in datacenter %}
                <tr>
                  <td><a href="{% url 'datacenterdetail' idc.id %}" target=_blank >{{ idc.name }}</td>
                  <td>{{ idc.shortname }}</td>
                  <td>{{ idc.isp }}</td>
                  <td>{{ idc.admin }}</td>
                  <td>{{ idc.contactnumber }}</td>
                  <td>{{ idc.address }}</td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block page-script %}
<script src="{% static 'js/mygeturl.js' %}"></script>
{% endblock %}
